<template>
  <div>
    <van-nav-bar :left-text="data.industry" @click-left="$emit('industry', data.industry)"
                 @click-right="$emit('close')">
      <template #title>
        <span> {{ symbol }} / {{ title }}</span>
      </template>
      <template #right>
        <van-icon name="close" size="18"/>
      </template>
    </van-nav-bar>
    <van-row>
      <van-col :span="24">
        <div :style="{color: getColor(data.change)}">
          <span class="last-price">{{ data.close }}</span>
          <span>{{ data.change.toFixed(2) }}</span>
          <span> / </span>
          <span>{{ data.change_rate.toFixed(2) }}%</span>
        </div>
      </van-col>
      <van-col :span="12">
        <span>开盘价</span>
        <span>{{ data.open }}</span>
      </van-col>
      <van-col :span="12">
        <span>最高价</span>
        <span class="highest-price">{{ data.high }}</span>
      </van-col>
      <van-col :span="12">
        <span>昨收价</span>
        <span>{{ data.pre_close }}</span>
      </van-col>
      <van-col :span="12">
        <span>最低价</span>
        <span class="lowest-price">{{ data.low }}</span>
      </van-col>
      <van-col :span="12">
        <span>成交量</span>
        <span>{{ numberFormat(data.volume, 2) }}手</span>
      </van-col>
      <van-col :span="12">
        <span>成交额</span>
        <span>{{ numberFormat(data.amount, 2) }}元</span>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import {numberFormat} from '@/utils'
import {getTicker} from '@/interfaces/eastmoney'

export default {
  props: {
    title: String,
    market: String,
    symbol: String,
    url: String,
  },
  data() {
    return {
      data: {
        open: 0,
        high: 0,
        low: 0,
        close: 0,
        pre_close: 0,
        volume: 0,
        amount: 0,
        change: 0,
        change_rate: 0,
        industry: '银行'
      }
    }
  },
  watch: {
    title() {
      this.load()
    }
  },
  methods: {
    numberFormat: numberFormat,
    load() {
      getTicker(this.market, this.symbol, resp => {
        this.data = this.onFormat(resp)
      })
    },
    getColor(value) {
      if (value > 0) {
        return '#F56C6C'
      } else if (value < 0) {
        return '#67C23A'
      } else {
        return '#2c3e50'
      }
    },
    onFormat(item) {
      return Object.assign({
        change: item.close - item.pre_close,
        change_rate: (item.close / item.pre_close - 1) * 100,
      }, item)
    }
  },
  mounted() {
    this.load()
  }
}
</script>

<style scoped>
.van-col {
  padding: 5px 15px;
}

.highest-price {
  color: #F56C6C;
}

.lowest-price {
  color: #67C23A;
}

.last-price {
  font-size: 28px;
}
</style>
